<template>
  <div style="display: flex;justify-content: space-between;margin-top: 30px;margin-bottom: 20px;">
    <el-form :inline="true" class="demo-form-inline"
             :model="form" :rules="rules"
             :disabled="!showEd"
             style="color: #666666;" label-width="100px" >
      <el-form-item label="作业码头：" v-if="keys.includes('mt')" style="padding: 0" prop="termCode">
        <el-select clearable style="width: 150px" size="small" @change="termCode"
                   v-model="form.termCode" placeholder="请选择作业码头">
          <el-option  :label="item.cnName" :value="item.termCode"  v-for="item,index in tips" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="船名航次：" v-if="keys.includes('hmh')" style="padding: 0" prop="termCode1">
        <el-select :disabled="!showEd" @change="voyId" clearable style="width: 150px" size="small"
                   v-model="form.voyId" placeholder="请选择码船名航次" filterable>
          <el-option  :label="item.termCode + '/' + item.vessels.cnname+'/'+item.iefg+item.voyage" :value="item.id"  v-for="item,index in shipNo"  v-if="null!==item.vessels" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="贸易类型：" v-if="keys.includes('myl')" style="padding: 0" prop="termCode1">
        <el-select :disabled="!showEd" @change="re" clearable style="width: 150px" size="small"
                   v-model="form.tradeFlag" placeholder="请选择贸易类型">
          <el-option  :label="item.key+'/'+item.value" :value="item.key"  v-for="item,index in shop"  :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提单号：" v-if="keys.includes('tdh')" style="padding: 0" prop="termCode1">
        <el-input :disabled="!showEd" @input="re" clearable style="width: 150px" size="small"
                  v-model="form.billNo" placeholder="请输入提单号"></el-input>
      </el-form-item>
      <!-- <el-form-item label="装卸船委托：" v-if="keys.includes('zxc')" style="padding: 0" prop="termCode11">
        <el-input :disabled="!showEd" @input="re" clearable style="width: 150px" size="small"
                  v-model="form.busDelegateNo" placeholder="请输入装卸船委托"></el-input>
      </el-form-item>
      <el-form-item label="进提货委托：" v-if="keys.includes('jth')" style="padding: 0" prop="termCode12">
        <el-input :disabled="!showEd" @input="re" clearable style="width: 150px" size="small"
                  v-model="form.operateDelegateNo" placeholder="请输入进提货委托"></el-input>
      </el-form-item> -->
      
      <el-form-item label="箱号：" v-if="keys.includes('xh')" style="padding: 0" prop="termCode1">
        <el-input :disabled="!showEd" @input="re" clearable style="width: 150px" size="small"
                  v-model="form.cntrNo" placeholder="请输入箱号"></el-input>
      </el-form-item>

      <el-form-item label="码头作业区：" v-if="keys.includes('mtz')" style="padding: 0" prop="termCode1">
        <el-select :disabled="!showEd" @change="re" clearable style="width: 150px" size="small"
                   v-model="form.termCode1" placeholder="请选择码头作业区">
          <el-option  :label="item.value" :value="item.key"  v-for="item,index in tips"  :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="返厂作业区：" v-if="keys.includes('fcz')" style="padding: 0" prop="termCode1">
        <el-select :disabled="!showEd" @change="re" clearable style="width: 150px" size="small"
                   v-model="form.termCode1" placeholder="请选择返厂作业区">
          <el-option  :label="item.value" :value="item.key"  v-for="item,index in tips"  :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="码头计划号：" v-if="keys.includes('mtj')" style="padding: 0" prop="termCode1">
        <el-select :disabled="!showEd" @change="re" clearable style="width: 150px" size="small"
                   v-model="form.termCode1" placeholder="请选择码头计划号">
          <el-option  :label="item.value" :value="item.key"  v-for="item,index in tips"  :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="计划号：" v-if="keys.includes('jhh')" style="padding: 0" prop="termCode1">
        <el-input :disabled="!showEd" @input="re" clearable style="width: 150px" size="small"
                   v-model="form.termCode1" placeholder="请选择计划号"></el-input>
      </el-form-item>
      <el-form-item label="进口船名船次：" v-if="keys.includes('jkc')" style="padding: 0" prop="termCode1">
        <el-select :disabled="!showEd" @change="re" clearable style="width: 150px" size="small"
                   v-model="form.termCode1" placeholder="请选择进口船名船次">
          <el-option  :label="item.value" :value="item.key"  v-for="item,index in tips"  :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间：" v-if="keys.includes('startTime')">
        <el-date-picker
            style="width: 150px"
            format="yyyy-MM-dd"
            size="small"
            @change="startTime"
            v-model="form.opsttm"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间：" v-if="keys.includes('endTime')">
        <el-date-picker
            style="width: 150px"
            format="yyyy-MM-dd"
            size="small"
            @change="endTime"
            v-model="form.opsttm"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="退款状态：" v-if="keys.includes('tk')" style="padding: 0" prop="termCode1">
        <el-select :disabled="!showEd" @change="re" clearable style="width: 150px" size="small"
                   v-model="form.termCode1" placeholder="请选择退款状态">
          <el-option  :label="item.value" :value="item.key"  v-for="item,index in tips"  :key="index"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="作业码头：" v-if="keys.includes('work')" style="padding: 0" prop="termCode1">
        <el-select :disabled="!showEd" @change="re" clearable style="width: 150px" size="small"
                   v-model="form.termCode1" placeholder="请选择作业码头">
          <el-option  :label="item.value" :value="item.key"  v-for="item,index in tips"  :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  label="船舶名称：" v-if="keys.includes('shipName')" prop="vslCd">
        <el-select :disabled="!showEd" @change="re" clearable style="width: 150px" size="small"
                   v-model="form.vslCd" placeholder="请选择船舶">
          <el-option  :label="item.cd" :value="item.cd"  v-for="item,index in ships" :key="index"></el-option>
        </el-select>
      </el-form-item>
<!--      <el-form-item label="贸易类型：" v-if="keys.includes('comType')">
        <el-select :disabled="!showEd" @change="re" clearable style="width: 150px" size="small"
                   v-model="searchPar" placeholder="请选择贸易类型">
          <el-option>111</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提单号：" v-if="keys.includes('num')">
        <el-select :disabled="!showEd" @change="re" clearable style="width: 150px" size="small"
                   v-model="searchPar" placeholder="请选择提单号">
          <el-option>111</el-option>
        </el-select>
      </el-form-item>-->


      <el-form-item label="状态：" v-if="keys.includes('status')">
        <el-select :disabled="!showEd" @change="re" clearable style="width: 150px" size="small"
                   v-model="form.planstatus" placeholder="请选择状态">
          <el-option v-for="item,index in stateList" :label="item.split(':')[1]"
                     :value="item.split(':')[0]" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="码头代码：" v-if="keys.includes('portCode')">
        <el-select :disabled="!showEd" @change="re" clearable style="width: 150px" size="small" v-model="searchPar" placeholder="请选择码头代码">
          <el-option>111</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="船舶：" v-if="keys.includes('ship')">
        <el-select :disabled="!showEd" @change="re" clearable style="width: 150px" size="small" v-model="searchPar" placeholder="请选择船舶">
          <el-option  :label="item.name" :value="item.id"  v-for="item,index in ships" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="船期状态：" v-if="keys.includes('shipStatus')">
        <el-select :disabled="!showEd" @change="re" clearable style="width: 150px" size="small" v-model="searchPar" placeholder="请选择船期状态">
          <el-option>111</el-option>
        </el-select>
      </el-form-item>
      <el-form-item  label="">
        <el-button size="small" type="primary" style="background: #043AA7;margin-left: 42px;"
                   @click="onSubmit" v-if="showEd">查询</el-button>
        <el-button size="small" type="info"
                   plain @click="form={}" v-if="showEd">重置</el-button>

        <el-button size="small" type="primary" plain
                   @click="importE" v-if="keys.includes('import')">导入</el-button>
        <el-button size="small" type="primary" plain
                   @click="addTag" v-if="keys.includes('add')"><i class="el-icon-plus" style="background: transparent"
        ></i>新增</el-button>
        <el-button size="small" type="danger" plain
                   @click="delTag" v-if="keys.includes('del')">批量删除</el-button>
        <el-button size="small" type="primary" style="background: #0268F4"
                   @click="planTag" v-if="keys.includes('out')">生成计划</el-button>
        <el-button size="small" type="primary" style="background: #0268F4"
                   @click="addTag" v-if="keys.includes('shipPlan')"><i class="el-icon-plus" style="background: #0268F4"
        ></i>船期计划</el-button>
        <el-button size="small" type="primary" style="background: #0268F4;"
                   @click="addPlan" v-if="keys.includes('todoPlan')">
<!--          <i class="el-icon-plus" style="background: #0268F4"></i>-->
          办理计划</el-button>
      </el-form-item>

    </el-form>
    <div style="margin-top: 5px">

    </div>
  </div>
</template>

<script>
export default {
  name: "searchForm",
  props:{
    showEd:{
      default: () => true
    },
    keys: {
      default: () => []
    },
  },
  data() {
    return {
      stateList:[
        'P:初始',
        'M:待确认',
        'W:待审核',
        'R:审核不通过',
        'A:审核通过',
        'S:下发成功',
        'F:下发失败',
        'Y:已支付',
        'N:取消'
      ],
      shipNo:[],
      ships:[],
      list:[],
      searchPar:'',
      form:{},
      oriForm:{},
      tips:[{key:'HX',value:'河西码头'},{key:'LTG',value:'龙头港'}],
      shop:[{key:'Y',value:'内贸'},{key:'N',value:'外贸'}],
      rules:{
        /*termCode1:[
          {required: true, message: '请选择活动区域', trigger: 'change'},
        ],
        vslCd:[
          {required: true, message: '请选择活动区域', trigger: 'change'},
        ],*/
      },
      cos:[],
      /*持箱人、箱控公司、货主、码头、船公司、船代理、货代、运输公司、堆场、港口*/
      cosType:[],
      opaAreaCode:[],
      rules:{
          "termCode":[
            { required: true, message: '请选择货种', trigger: 'blur' }
          ],
      }
    }
  },
  watch:{
    searchPar(){
      console.log(999)
      console.log(this.searchPar)
      this.$emit('sub')
    }
  },
  created() {

    //this.getPer()
  },
  methods: {
    termCode(){
      this.$emit('termCode',this.form.termCode)
    },
    //作业码头
		term() {
			this.$api.term().then(res => {
				this.tips = res.data.data
			})
		},
    voyId(id){
      console.log(999)
      console.log(id)
      this.shipNo.forEach(item=>{
        if(id === item.id){
          this.form.cnname=item.vessels.cnname+'/'+item.iefg+item.voyage
        }
        
      })
    },
    menuList(){
      this.$api.opaAreaCode({}).then(res=>{
        this.opaAreaCode=res.data
      }).catch()
      this.$api.getVessels().then(res=>{
        this.ships=res.data
      }).catch()
    },
    endTime(e){

    },
    startTime(e){

    },
    re(){
      this.$forceUpdate()
    },
    getPer(){
      /*this.$api.QueryDataStandard({
        module:'vessels',
        page:{
          current:0,
          size:999
        }
      }).then(res=>{
        this.ships=res.data
      }).catch()*/
      this.$api.getVessels().then(res=>{
        this.ships=res.data
      }).catch()
      this.$api.voyagesPage({
        //termCode:'HX',
        size:999,
        current:0
      }).then(res=>{
        this.shipNo=res.data.records
      }).catch()
    },
    onSubmit() {
      //this.$api.login()
      console.log('submit!');
      this.$emit('sub')
    },
    addTag(){
      console.log('add!');
      //this.link()
      this.$emit('add')
    },
    delTag(){
      console.log('add!');
      //this.link()
      this.$emit('delTag')
    },
    planTag(){
      console.log('add!');
      //this.link()
      this.$emit('planTag')
    },
    importE(){
      console.log('add!');
      //this.link()
      this.$emit('importE')
    },
    addPlan(){
      this.$emit('addPlan')
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .el-form-item {
  margin-top: 0px!important;
  margin-bottom: 2px!important;
}
/deep/ .el-form-item__label {
  padding: 0!important;
}
</style>
